<template>
  <div class="listItems">
    <div class="listItems_top">
      <div class="listItems_top_img">
        <img class="img" v-if="isImg(row?.productImage)" :src="isImg(row?.productImage)" alt="" />
        <img class="img" v-else src="@/assets/home/error.png" alt="" />
        <div class="img_tag" v-if="mechanism() && mechanism()[1].cooperationMode"></div>
      </div>
      <div class="top_box">
        <div class="top_box_title">
          <div class="title">{{ row?.styleName || '' }}</div>
          <div :class="{ title_tag: true, ...isStatusColour() }">
            {{ isStatusName(row?.auditStatus, status, row?.stockAuditStatus, row?.stockStatus) }}
          </div>
        </div>
        <div class="top_box_text">{{ row?.sellingPoints || '' }}</div>

        <div class="top_box_date">

          <div v-if="status === 0 || status === 1 || status === 2">{{ row?.recruiter || '未知'
            }}</div>
          <div v-if="status === 3">{{ row?.recruiter || '未知' }} | {{
            row?.updateTime.slice(2)
          }}
          </div>
          <div v-if="status === 4">{{ row?.recruiterDept }} |
            {{ row?.recruiter }}</div>
          <div class="l_line" v-if="isTime||(status === 4)" ></div>
          <div v-if="isTime">{{ row.submitTime }}</div>
          <div v-if="!listName()">{{ listName() }}</div>
          <div v-if="status === 4">{{ row?.auditTime }}</div>
        </div>
        <div class="top_box_number">
          <div class="number_one">
            <span class="one_span">￥</span>{{ isPrice(mechanism() && mechanism()[0]) }}
          </div>
          <div class="number_two" v-if="mechanism() && mechanism()[0].cooperationMode === '分佣'">
            <div class="two_left">佣</div>
            <div class="two_right">{{ mechanism() && mechanism()[0].commission }}%</div>
          </div>
          <div class="number_three">{{ mechanism() &&
            mechanism()[0].liveStreamingMechanism
            }}</div>
        </div>
        <div class="top_box_cont">

          <div class="cont_tag" v-if="row?.coreName">
            <img class="tag_img" src="@/assets/porduct/icon_bumen.png" alt="">{{ row?.coreName || ''
            }}
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import { getEnvValue } from "@/utils/index";
import { isStatusName } from './listItems.ts'
// status: 0:招商审批中，1招商驳回，2招商通过，3：产品部入库审批，4：产品部变价接收
const props = defineProps(['row', 'status', 'isTime'])
console.log('props',props.row,props.status);
const icon_imgNull = new URL("@/assets/newui/imgNull.jpg", import.meta.url).href;
// 图片路径处理
const isImg = (url: string | null) => {
  if (url) {
    let imgArr = url?.split(',')
    if (imgArr?.length) {
      return `${getEnvValue("VITE_APP_PIC_URL")}${imgArr[0]}?x-oss-process=image/resize,w_300`
    }else{
      return icon_imgNull;
    }
  } else {
    return icon_imgNull
  }
}

// 售价与成本区分
const isPrice = (data: any) => {
  if (data?.cooperationMode === '分佣') {
    return data?.price
  } else {
    return data?.costPrice
  }
}
// 状态颜色区分
const isStatusColour = () => {
  const type = isStatusName(props?.row?.auditStatus, props?.status, props?.row?.stockAuditStatus, props?.row?.stockStatus)
  if (type === '初审中' || type === '复审中' || type === '待入库' || type === '入库中' || type === '无合同审批中' || type === '变审中' || type === '待接收' || type === '待审批') {
    return { "title_tag_lan": true }
  } else if (type === '初审通过' || type === '复审通过' || type === '无合同通过' || type === '入库通过' || type === '变审通过' || type === '已接收' || type === '已通过') {
    return { "title_tag_lv": true }
  } else if (type === '初审驳回' || type === '复审驳回' || type === '补充合同' || type === '入库驳回' || type === '变价驳回' || type === '已下架' || type === '已退还' || type === '已驳回') {
    return { "title_tag_hong": true }
  }
}

// 底部审批字样反显
const listName = () => {
  const auditStatus = props.row?.auditStatus
  let arr: any = []
  let name = ''
  if ((auditStatus === '11' && props.status === 1) || auditStatus === '8' || auditStatus === '9' || auditStatus === '10') {
    // 8:初审全部驳回，9:初审中资质驳回，10:初审中的价格驳回，11并且status==1：初审通过
    arr = JSON.parse(JSON.stringify(props.row?.hmQualityFirstLogList || []))
    arr.forEach(item => {
      name = `${item.auditNickName} ${item.auditTime} 审批`
    })
  }
  if (auditStatus === '12' || auditStatus === '13') {
    // 12:复审驳回，13：复审通过
    arr = JSON.parse(JSON.stringify(props.row?.hmPricingThreeLogList || []))
    arr.forEach(item => {
      name = `${item.auditNickName} ${item.auditTime} 审批`
    })
  }
  if (auditStatus === '14' || auditStatus === '15') {
    // 14:无合同驳回
    arr = JSON.parse(JSON.stringify(props.row?.hmContactOneLogList || []))
    arr.forEach(item => {
      name = `${item.auditor} ${item.auditTime} 审批`
    })
  }
  // 招商变价审批
  if (auditStatus === '20' || (auditStatus === '21' && props.status !== 3)) {
    arr = JSON.parse(JSON.stringify(props.row?.hmChangeAuditLogTwoList || []))
    arr.forEach(item => {
      name = `${item.pricingUserName} ${item.pricingAuditTime} 审批`
    })
  }
  // 产品变价接收
  if (auditStatus === '21' && props.status === 4) {
    return props?.row?.stockAuditStatus === 0 ? props?.row?.pricingAuditTime : props?.row?.stockAuditTime
  }
  // 入库审批
  if (auditStatus === '17' || auditStatus === '18') {
    arr = JSON.parse(JSON.stringify(props.row?.hmStockAuditLogOneList || []))
    arr.forEach(item => {
      name = `${item.auditor} ${item.stockAuditTime} 审批`
    })
  }
  return name
}
// 根据不同部门返回不同的机制
const mechanism = () => {
  if (props?.status === 4) {
    return props.row?.hmStockMechanismsList && props.row?.hmStockMechanismsList.length ? props.row?.hmStockMechanismsList : null
  } else {
    return props.row?.hmMechanismsList && props.row?.hmMechanismsList.length ? props.row?.hmMechanismsList : null
  }
}



</script>

<style lang="less" scoped>
.listItems {
  padding: 10px;
  box-sizing: border-box;
  background: #fff;

  .listItems_top {
    display: flex;
    justify-content: center;

    .listItems_top_img {
      margin-right: 10px;
      position: relative;
      

      .img {
        width: 120px;
        height: 120px;
        background: #E5F0FF;
        border-radius: 5px;
        object-fit: cover;
        vertical-align: middle;
      }

      .img_tag {
        width: 46px;
        height: 22px;
        background-image: url("@/assets/newui/productList/icon_duojizhi@2x.png");
        background-size: 100% 100%;
        border-radius: 2px 0px 2px 0px;
        position: absolute;
        top: 0px;
        left: 0px;
      }
    }

    .top_box {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .top_box_title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
          flex: 0.9;
          min-width: 0;
          height: 22px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: 500;
          font-size: 16px;
          color: #1A1B1C;
        }

        .title_tag {
          padding: 5px 5px;
          border-radius: 2px;
          line-height: 12px;
          text-align: center;
          font-weight: 500;
          font-size: 12px;
        }

        .title_tag_lan {
          background: #EBF4FF;
          color: #0094FF;
        }

        .title_tag_lv {
          background: #E7FDEE;
          color: #19D11B;
        }

        .title_tag_hong {
          background: #FDE7E7;
          color: #FC2540;
        }
      }

      .top_box_text {
        width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 400;
        font-size: 12px;
        color: #8492AD;
        word-break: break-all;
      }

      .top_box_date {
        display: flex;
        align-items: center;
        width: fit-content;
        height: 20px;
        background: #FEF6E2;
        border-radius: 5px;
        font-weight: 400;
        font-size: 12px;
        color: #B5884A;
        line-height: 20px;
        padding: 0 5px;

        .l_line {
          width: 1px;
          height: 12px;
          background-color: #B5884A;
          margin-left: 5px;
          margin-right: 5px;
        }
      }

      .top_box_number {
        display: flex;
        align-items: center;

        .number_one {
          font-weight: 500;
          font-size: 18px;
          color: #FC2540;

          .one_span {
            font-size: 12px;
            font-weight: 400;
          }
        }

        .number_two {
          margin-left: 10px;
          height: 16px;
          background: linear-gradient(136deg, #E9D1A5 0%, #CEA46C 100%);
          border-radius: 2px;
          display: flex;

          .two_left {
            width: 22px;
            height: 16px;
            background: #1B1714;
            border-radius: 2px;
            text-align: center;
            line-height: 16px;
            font-weight: 400;
            font-size: 12px;
            color: #CEA46C;
          }

          .two_right {
            padding: 0 3px;
            text-align: center;
            line-height: 16px;
            font-weight: 500;
            font-size: 12px;
            color: #1B1714;
          }
        }

        .number_three {
          max-width: fit-content;
          flex: 1;
          margin-left: 10px;
          height: 16px;
          border-radius: 2px;
          border: 1px solid #FF5A1A;
          line-height: 16px;
          text-align: center;
          font-weight: 400;
          font-size: 12px;
          color: #FF5A1A;
          padding: 0 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .top_box_cont {

        .cont_tag {
          height: 22px;
          background: #EBF4FF;
          border-radius: 2px;
          display: flex;
          align-items: center;
          padding: 0 5px;
          font-weight: 500;
          font-size: 12px;
          color: #0094FF;
          width: fit-content;

          .tag_img {
            width: 12px;
            height: 12px;
            margin-right: 5px;
          }
        }
      }
    }
  }

  .listItems_bottom {
    font-weight: 400;
    font-size: 12px;
    color: #8492AD;
  }
}
</style>